<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Jimp Demo</title>
<link rel="stylesheet" media="screen" href="files/jimp.css" type="text/css">
<link rel="stylesheet" media="screen" href="files/style.css" type="text/css">
<script src="files/jquery.js" type="text/javascript"></script>
<script src="files/jimp.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$('#example a').jimp({
		hideOnChange:false
	});
});
</script>
</head>
<body>

<div id="page-wrap">
<h1>Jimp - A JQuery Tooltip for Image Preview</h1>
<section id="example">


<a title="Autumn Orange" href="files/autumn-orange-large.jpg">
	<img alt="" src="files/autumn-orange.jpg">
</a>
<a title="Autumn Leaves" data-preview="files/autumn-large.jpg" href="http://hompimpaalaihumgambreng.blogspot.com/">
	<img alt="" src="files/autumn.jpg">
</a>


<div class="clear"></div>
<a href="http://hompimpaalaihumgambreng.blogspot.com/" data-preview="files/dte-big.png">As a link!</a>
<div class="clear"></div>
</section>
<section id="usage">
<h2>Basic Usage</h2>
<h3>The Markup</h3>
<pre><code><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"large-image.jpg"</span> <span class="attribute">title</span>=<span class="value">"Image Title"</span>&gt;</span><span class="tag">&lt;<span class="title">img</span> <span class="attribute">alt</span>=<span class="value">""</span> <span class="attribute">src</span>=<span class="value">"thumbnail-image.jpg"</span>/&gt;</span><span class="tag">&lt;/<span class="title">a</span>&gt;</span>
<span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-preview</span>=<span class="value">"large-image.jpg"</span> <span class="attribute">href</span>=<span class="value">"page-url.html"</span> <span class="attribute">title</span>=<span class="value">"Image Title"</span>&gt;</span>This is an example link!<span class="tag">&lt;/<span class="title">a</span>&gt;</span></code></pre>

<h3>The JQuery</h3>
<pre><code><span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"jquery-1.7.2.min.js"</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"js/jimp.js"</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript">
$(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
    $(<span class="string">'#example a'</span>).jimp();
});
</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></pre>
</section>
<section id="options">
<h2>Default Configuration</h2>
<pre><code>$(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
    $(<span class="string">'#example a'</span>).jimp({
        width: <span class="number">40</span>, <span class="comment">// default width of the tooltip before image loaded</span>
        height: <span class="number">40</span>, <span class="comment">// default height of the tooltip before image loaded</span>
        resizeSpeed: <span class="number">200</span>, <span class="comment">// resize speed of container</span>
        fadeSpeed: <span class="number">400</span>, <span class="comment">// fade speed of image</span>
        delay: <span class="number">1000</span>, <span class="comment">// mouseenter delay before excecuting</span>
        offsetTop: <span class="number">20</span>, <span class="comment">// tooltip offset top from pointer</span>
        offsetLeft: <span class="number">20</span>, <span class="comment">// tooltip offset left from pointer</span>
        linkText: <span class="string">'save'</span>, <span class="comment">// save button label</span>
        closeText: <span class="string">'&amp;#215'</span>, <span class="comment">// close button label</span>
        hideOnOut: <span class="literal">false</span>, <span class="comment">// if true, then when pointer mouse leave from image/link target, the tooltip will hidden and back to it's normal size</span>
        hideOnChange: <span class="literal">false</span> <span class="comment">// if true, then when pointer mouse leave from image/link target (and then enter to the other target), the tooltip will hidden and back to it's normal size</span>
    });
});</code></pre>
</section>
<footer>Just another work by <a href="http://hompimpaalaihumgambreng.blogspot.com/">Taufik Nurrohman</a> :]</footer>
</div>

</body>
</html>